<!-- 数据面板盒子公用组件 -->
<template>
  <card :title="title">
    <div class="tdesign-demo-item--grid">
      <t-row justify="space-around">
        <t-col :span="colLength" v-for="(item, key) in options" :key="key">
          <div class="content">
            <span :class="[item.title === '待办任务' ? 'black' : '']" v-if="item.count < 99">{{ item.count }}</span>
            <span :class="[item.title === '待办任务' ? 'black' : '']" v-else>99+</span>
            <div>{{ item.title }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
  </card>
</template>

<script>
import Card from '@/components/Card/index.vue';

export default {
  components: {
    Card,
  },
  props: {
    title: {
      type: String,
      default: '标题',
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    colLength() {
      return 12 / this.options.length;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 99%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  span {
    color: #0052d9;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 12px;
  }
}
.black {
  color: #000000 !important;
}
</style>
